import {Alert, Checkbox, Col, message, Modal, Row} from 'antd';
import React, {useState} from 'react';
import type {History} from 'umi';
import {history, Link, SelectLang, useModel} from 'umi';
import logo from '@/assets/logo.png';
import type {LoginParamsType} from '@/services/login';
import {fakeAccountLogin} from '@/services/login';
import Footer from '@/components/Footer';
import LoginFrom from './components/Login';
import styles from './style.less';
import Register from "@/pages/Register";

const {Tab, Username, Password, Submit, Mobile, Captcha} = LoginFrom;

const LoginMessage: React.FC<{
  content: string;
}> = ({content}) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

/**
 * 此方法会跳转到 redirect 参数所在的位置
 */
const replaceGoto = () => {
  setTimeout(() => {
    const {query} = history.location;
    const {redirect} = query as { redirect: string };
    if (!redirect) {
      history.replace('/');
      return;
    }
    (history as History).replace(redirect);
  }, 10);
};

const Login: React.FC = () => {
  const [userLoginState, setUserLoginState] = useState<API.LoginStateType>({});
  const [submitting, setSubmitting] = useState(false);
  const {initialState, setInitialState} = useModel('@@initialState');
  const [autoLogin, setAutoLogin] = useState(true);
  const [type, setType] = useState<string>('account');
  const [modalVisible, setModalVisible] = useState<boolean>(false);

  const handleSubmit = async (values: LoginParamsType) => {
    setSubmitting(true);
    try {
      // 登录
      const msg = await fakeAccountLogin({...values, type});
      if (msg.status === 'ok' && initialState) {
        if (msg.token) {
          await localStorage.setItem("Authorization", `Bearer ${msg.token}`)
          message.success('登录成功！');
          const currentUser = await initialState?.fetchUserInfo();
          setInitialState({
            ...initialState,
            currentUser,
          });
          replaceGoto();
          return;
        }
      }
      // 如果失败去设置用户错误信息
      setUserLoginState(msg);
    } catch (error) {
      message.error('登录失败，请重试！');
    }
    setSubmitting(false);
  };

  const close = () => {
    setModalVisible(false)
  }

  const {status, type: loginType} = userLoginState;

  return (
    <div style={{width: '100%'}}>
      <div className={styles.container}>
        <div className={styles.lang}>
          <SelectLang/>
        </div>
        <div className={styles.content}>
          <div className={styles.top}>
            <div className={styles.header}>
              <Link to="/">
                <img alt="logo" className={styles.logo} src={logo}/>
                <span className={styles.title}>工具系统</span>
              </Link>
            </div>
          </div>

          <div className={styles.main}>
            <LoginFrom activeKey={type} onTabChange={setType} onSubmit={handleSubmit}>
              <Tab key="account" tab="账户密码登录">
                {status === 'error' && loginType === 'account' && !submitting && (
                  <LoginMessage content="账户或密码错误（admin/ant.design）"/>
                )}

                <Username
                  name="username"
                  placeholder="用户名:"
                  rules={[
                    {
                      required: true,
                      message: '请输入用户名!',
                    },
                  ]}
                />
                <Password
                  name="password"
                  placeholder="密码"
                  rules={[
                    {
                      required: true,
                      message: '请输入密码！',
                    },
                  ]}
                />
              </Tab>
              <Tab key="mobile" tab="手机号登录">
                {status === 'error' && loginType === 'mobile' && !submitting && (
                  <LoginMessage content="验证码错误"/>
                )}
                <Mobile
                  name="mobile"
                  placeholder="手机号"
                  rules={[
                    {
                      required: true,
                      message: '请输入手机号！',
                    },
                    {
                      pattern: /^1\d{10}$/,
                      message: '手机号格式错误！',
                    },
                  ]}
                />
                <Captcha
                  name="captcha"
                  placeholder="验证码"
                  countDown={120}
                  getCaptchaButtonText=""
                  getCaptchaSecondText="秒"
                  rules={[
                    {
                      required: true,
                      message: '请输入验证码！',
                    },
                  ]}
                />
              </Tab>
              <div>
                <Row>
                  <Col span="8">
                    <Checkbox checked={autoLogin} onChange={(e) => setAutoLogin(e.target.checked)}>
                      自动登录
                    </Checkbox>
                  </Col>
                  <Col style={{textAlign: 'right'}} offset={10} span="6">
                    <a onClick={() => {
                      setModalVisible(true)
                    }}>注册</a>
                  </Col>
                </Row>
              </div>
              <Submit loading={submitting}>登录</Submit>
            </LoginFrom>
          </div>
          <Modal visible={modalVisible} footer={null} onCancel={close}>
            <Register close={close}/>
          </Modal>
        </div>
        <Footer/>
      </div>
    </div>
  );
};

export default Login;
